<template>
    <div class="wallpapermallpage">
      <nav-bar></nav-bar>
      <search @filteringCompleted="handleFilteringCompleted"></search>
      <!-- <button @click="closePopup">closePopup</button> -->

    <div v-if="showPopup">
      <h3>搜索结果</h3>
      <!-- <div v-for="result in resolvedImages.data" :key="result.id">
        <img :src="result.wUrl" :alt="result.name" />
        <p>标签：{{ result.wCate }}</p>
      </div> -->
      <image-list :images="resolvedImages" @showImageDetail="showImageDetail"></image-list>
    </div>

      <div v-for="item in classlist" :key="item.title" >
        <one-title :title="item.title"></one-title>
        <image-list :images="list[item.type]" @showImageDetail="showImageDetail" ></image-list>
      </div>
  
      <div class="image-detail" v-if="showDetail" >
        <div class="image-detail__content">
          <img :src="selectedImage.url" alt="Selected Image" >
          <div class="image-detail__info" > 
            <!-- <p>ID: {{ selectedImage.id }}</p> -->
            <p>标签：{{ selectedImage.name }}</p>
            <!-- 显示其他详细信息 -->
          </div>
          <button @click="closeImageDetail">关闭</button>
        </div>
      </div>
      <!-- <Popup v-if="showPopup" :images="resolvedImages" :isOpen="showPopup" /> -->
      <!-- <Popup :images="resolvedImages" v-if="showPopup"/> -->
      
    </div>
  </template>
  
  <script>
  import OneTitle from './Page/OneTitle.vue';
  import ImageList from './Page/ImageList.vue';
  import NavBar from './Page/NavBar.vue';
  import Search from './Page/Search.vue';
  import axios from 'axios';
  import Image from './Page/image.js';
  import Popup from './Page/Popup.vue';

  
  export default {
    name: 'wallpaper-mall',
    data() {
      return {
        classlist: [
          {
            title: "风景",
            type: "scene"
          },
          {
            title: "二次元",
            type: "erciyuan"
          },
          {
            title: "科幻",
            type: "technology"
          },
          {
            title: "其它",
            type: "else"
          }
        ],
        images:null,
        showPopup: false,
        showDetail: false,
        selectedImage: null,
        tempurl:null,
        imagesResolved: false, // 标志位，表示 Promise 对象是否已解析
        resolvedImages: [], // 解析后的数组，用于传递给 Popup 组件
        // images123: selectedImage,
        list: {
          scene:[],
          erciyuan: [],
          technology: [],
          else: [],
        },
        searchResults: [],
      };
    },
    mounted() {
    console.log(this.list)
    this.fetchImage('scene');
    this.fetchImage('erciyuan');
    this.fetchImage('technology');
    this.fetchImage('else');
  },
  watch: {
     selectedImage() {
       this.resolveImages(); // 在 images 属性更新时执行解析操作
    },
    searchResults(){
      this.resolveImages();
    },
    immediate: true
  },
    methods: {
      clearData(){
        this.$store.dispatch('clearData');
      },
      showImageDetail(image) {
        this.showDetail = true;
        this.selectedImage = image;
      },
      closeImageDetail() {
        this.showDetail = false;
        this.selectedImage = null;
      },
      changetagtochina(originname){
        if(originname == 'scene'){
          return '风景'
        }
        else if(originname == 'erciyuan'){
          return '二次元'
        }
        else if(originname == 'technology'){
          return '科幻'
        }
        else{
          return '其它'
        }
      },
      fetchImage(type) {
      const url = 'https://localhost:7293/api/Wallpapers';
      //console.log(this.list)
      axios.get(url)
        .then(response => {
          // 假设返回的数据是一个包含图片信息的数组，这里获取第一张图片的 URL
          const images= response.data;
          images.forEach((imageData,index) => {
            const image = new Image(index+1,imageData.wUrl,this.changetagtochina(imageData.wCate),false);
          if(imageData.wCate == type)
            this.list[type].push(image);
          });
      // console.log(this.list.data_added);
        })
        .catch(error => {
          console.error(error);
        });
      // 创建一个图片对象
    },
    handleFilteringCompleted(filteredImages) {
        // 处理筛选结果，更新数据或进行其他操作
        console.log('handleFilteringCompleted执行了')
        // console.log(filteredImages)
        this.selectedImage = filteredImages;
        this.searchResults = filteredImages;
        console.log('searchResults是这样滴：：：：：；',this.searchResults)
        // console.log(this.selectedImage)
        this.showPopup = true;
        // this.isOpen = this.showPopup;
      },
    async resolveImages() {
      try {
        // 等待 Promise 对象的解析
        this.resolvedImages = await this.selectedImage;
        this.resolvedImages = await this.searchResults;
        console.log('resolvedImages是这样滴：：：',this.resolvedImages)

        this.imagesResolved = true; // 标志位设为 true，表示 Promise 对象已解析
      } catch (error) {
        console.error(error);
      }
    },
    closePopup(){
      this.showPopup = false;
    }
    },
    components: {
      OneTitle,
      ImageList,
      NavBar,
      Search,
      Popup
    }
  };
  </script>
  
  <style>
  /* 添加样式以及详细信息框的样式 */
  .image-detail {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }
  
  .image-detail__content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-detail__image {
  width: 100%;
  max-width: 900px; /* 调整图片的最大宽度 */
  height: auto;
  margin-bottom: 10px;
}

  
  .image-detail__info {
    margin-top: 10px;
  }
  
  .image-detail__info p {
    margin: 5px 0;
  }
  
  .image-detail__info p:first-child {
    font-weight: bold;
  }
  
  .image-detail__content img {
    width: 400px;
    height: auto;
    margin-bottom: 10px;
  }
  
  .image-detail__content button {
    margin-top: 10px;
    padding: 5px 10px;
    background-color: #f2f2f2;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .image-detail__content button:hover {
    background-color: #ccc;
  }
  </style>
  